<template>
  <div v-loading="searchLoading" class="overview-alarm">
    <div class="overview-alarm-search">
      <commonSearch
        v-if="searchOption?.length"
        ref="commonSearchRef"
        v-model:loading="searchLoading"
        :row-num="4"
        :operationSpan="3"
        :option="searchOption"
        @submit="submitSearchFormHandler"
        @reset="submitSearchFormHandler"
      />
    </div>
    <div ref="fabAlarmListTableRef" class="overview-alarm-table">
      <commonTable
        ref="commonTableRef"
        indexNeed
        :operationOptions="operationOptions"
        :tableCloumns="tableCloumns"
        :header-cell-style="headerCellStyleFn"
        :height="scrollbarHeight"
        :row-key="getRowKey"
        :axiosApi="queryFabAlarmList"
        :params="params"
      />
    </div>
    <curve v-if="isShowCurve" v-model="isShowCurve" :params="curveParams" :title="curveTitle" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_FAB_ALARM"
});

import { ref, onMounted, onUnmounted, markRaw } from "vue";
import { useRouter } from "vue-router";
import { PxMessage, PxMessageBox } from "px-ui";
import { LineChart, LinkPx, Delete, Modeling } from "@px-ui/icons-vue";
import commonTable from "@/views/common/components/commonTable/index.vue";
import commonSearch from "@/views/common/components/commonSearch/index.vue";
import curve from "./components/curve.vue";
import { queryFabAlarmList, removeFabAlarm } from "@/api/modules/fab";
import { useSearchOption, useTableCloumns } from "./hooks";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";
import { useRouterStoreHook } from "@/store/modules/router";
import { useMessageBox } from "@/hooks/useCommon";
import dayjs from "dayjs";

const router = useRouter();
const routerStore = useRouterStoreHook();

const searchLoading = ref<boolean>(false);
const gap = 84;
const defaultHeight = 606;
const fabAlarmListTableRef = ref<HTMLElement | null>(null);
const commonTableRef = ref<CommonTable.TableRefType>(null);
const commonSearchRef = ref<CommonSearch.SearchFormRefType>(null);
const isShowCurve = ref<boolean>(false);
const curveParams = ref<Record<string, any>>({});
const curveTitle = ref<string>("");
const scrollbarHeight = ref<number>(defaultHeight);
const searchOption = ref<Array<CommonSearch.SearchOption>>(useSearchOption());

const detail = (scope: any) => {
  const {
    row: { deviceId: eqpId = "" }
  } = scope;
  const path = "/fullScreen/fab/detail";
  const query = { eqpId };
  let params = encodeURI(JSON.stringify(query));
  const { href } = router.resolve({ path, query: { params } });
  window.open(href, "_blank");
};

const tableCloumns = ref<Array<CommonTable.TableCloumnsType>>(useTableCloumns(detail));
const params = ref<any>({});

const operationOptions: Array<CommonTable.operationOptionItemType> = [
  {
    content: "详情",
    auth: `${routerStore.subject}_FAB_ALARM_DETAIL`,
    icon: markRaw(Modeling),
    click: (scope: any) => detail(scope)
  },
  {
    content: "查看历史",
    auth: `${routerStore.subject}_FAB_ALARM_CHART`,
    icon: markRaw(LineChart),
    click: (scope: any) => checkHistory(scope.row)
  }
  // {
  //   content: "删除",
  //   auth: `${routerStore.subject}_FAB_ALARM_DELETE`,
  //   type: "danger",
  //   icon: markRaw(Delete),
  //   click: (scope: any) => del(scope.row.alarm_id)
  // }
];

let defaultParams: any = {
  deviceType: null,
  className: routerStore.subject === "ALL" ? null : routerStore.subject
};
let currentParams: any = {};

const getRowKey = row => {
  return row.alarm_id;
};

const headerCellStyleFn = ({ row, column, rowIndex, columnIndex }: CommonTable.CellType): Record<string, string> => {
  const style = {};
  if (columnIndex === 3) {
    style["text-align"] = "center";
  }
  return style;
};

const updateParams = () => {
  params.value = { ...defaultParams, ...currentParams };
};

const submitSearchFormHandler = (form: any) => {
  currentParams = { ...currentParams, ...form };
  updateParams();
};

const checkHistory = row => {
  const { deviceId: eqpId = "", materialCode = "", alarmTime = "", alarmMsg = "" } = row;
  const date = dayjs(alarmTime).format("YYYYMMDD");
  curveParams.value = { eqpId, materialCode, date };
  curveTitle.value = alarmMsg;
  isShowCurve.value = true;
};

const del = (alarmId: number) => {
  const msg = "是否删除该设备告警信息？";
  useMessageBox("delete", msg, async () => {
    await removeFabAlarm({ alarmId });
    await commonTableRef.value.queryTableData(null, true);
    PxMessage.success("删除成功！");
  });
};

onMounted(async () => {
  await useUpdateDomHeight(scrollbarHeight, fabAlarmListTableRef, gap, defaultHeight);
});

onUnmounted(() => useCancelUpdateDomHeight());
</script>
<style scoped lang="scss">
.overview-alarm {
  box-sizing: border-box;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;

  .overview-alarm-btns {
    margin-top: 16px;
  }

  .overview-alarm-table {
    margin-top: 16px;
  }
}
</style>
